<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <header class="header">
      <h1 class="title">就诊信息</h1>
      <p class="subtitle">欢迎 {{ patientInfo.patientName }}</p>
    </header>

    <!-- 主体内容 -->
    <main class="main-content">
      <!-- 未绑定状态 -->
      <div v-if="!isBound" class="unbound-state">
        <p class="prompt">您尚未绑定就诊信息，请绑定后查看。</p>
        <el-button type="primary" @click="showBindDialog = true"
          >绑定就诊信息</el-button
        >
      </div>
      <!-- 已绑定状态 -->
      <div v-else class="bound-state">
        <h2 class="section-title">就诊信息</h2>
        <div class="patient-info">
          <el-form
            :model="patientInfo"
            label-width="100px"
            label-position="left"
          >
            <el-form-item label="就诊卡号">
              <el-input
                v-model="patientInfo.cardId"
                class="short-input"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input
                v-model="patientInfo.patientName"
                class="short-input"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input
                v-model="patientInfo.patientSex"
                class="short-input"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input
                v-model="patientInfo.age"
                class="short-input"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input
                v-model="patientInfo.phone"
                :rules="[
                  { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
                ]"
                class="short-input"
                :disabled="!isEditing"
              ></el-input>
            </el-form-item>
            <el-form-item label="证件号">
              <el-input
                v-model="patientInfo.number"
                class="short-input"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="联系人姓名">
              <el-input
                v-model="patientInfo.familyName"
                class="short-input"
                :disabled="!isEditing"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系人电话">
              <el-input
                v-model="patientInfo.familyPhone"
                class="short-input"
                :disabled="!isEditing"
              ></el-input>
            </el-form-item>
            <el-form-item label="注册时间">
              <el-input
                v-model="patientInfo.date"
                class="short-input"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="就诊卡余额">
              <el-input
                v-model="patientInfo.money"
                class="short-input"
                disabled
              ></el-input>
            </el-form-item>
            <!-- 操作按钮 -->
            <el-form-item>
              <el-button type="primary" class="edit-btn" @click="startEdit"
                >编辑</el-button
              >
              <el-button type="success" @click="saveEdit">保存</el-button>
              <el-button @click="cancelEdit">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </main>

    <!-- 底部版权信息 -->
    <footer class="footer">
      <p class="footer-text">&copy; 2025 智能医诊系统</p>
    </footer>

    <!-- 绑定就诊信息弹窗 -->
    <el-dialog v-model="showBindDialog" title="绑定就诊信息" width="30%">
      <el-form :model="bindInfo">
        <el-form-item label="就诊卡号">
          <el-input
            v-model="bindInfo.cardId"
            placeholder="请输入就诊卡号"
            @blur="fetchPatientInfo"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="bindInfo.patientName" disabled></el-input>
        </el-form-item>
        <el-form-item label="证件号">
          <el-input v-model="bindInfo.number" disabled></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="bindInfo.phone" disabled></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showBindDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmBind">确定</el-button>
          <el-button type="warning" @click="register"
            >还没有就诊信息，立即注册</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import {
  getPatientNameByCardId,
  bindPatientInfo,
  getInfo,
  updatePatientInfo,
} from "@/api/patients/patientlist";

const isBound = ref(false); // 是否已绑定就诊信息
const showBindDialog = ref(false); // 是否显示绑定模态框
const bindInfo = ref({
  cardId: "", // 就诊卡号
  patientName: "", // 姓名
  number: "", // 证件号
  phone: "", // 电话
});
const patientInfo = ref({
  patientName: "", // 姓名
  patientSex: "", // 性别
  age: "", // 年龄
  phone: "", // 手机号
  number: "", // 证件号
  familyName: "", // 联系人姓名
  familyPhone: "", // 联系人电话
  date: "", // 注册时间
  money: "", // 就诊卡余额
});

const isEditing = ref(false);
const originalData = ref(null); // 用于取消时恢复数据

// 进入编辑模式
const startEdit = () => {
  isEditing.value = true;
  originalData.value = JSON.parse(JSON.stringify(patientInfo.value)); // 深拷贝原始数据
};

// 保存修改
const saveEdit = async () => {
  try {
    await updatePatientInfo(patientInfo.value);
    ElMessage.success("修改成功");
    isEditing.value = false;
  } catch (error) {
    ElMessage.error("保存失败");
  }
};

// 取消修改
const cancelEdit = () => {
  patientInfo.value = originalData.value;
  isEditing.value = false;
};

const fetchInfo = async () => {
  try {
    const response = await getInfo();
    if (response) {
      isBound.value = true;
      patientInfo.value.cardId = response.cardId;
      patientInfo.value.patientName = response.patientName;
      patientInfo.value.patientSex = response.patientSex;
      patientInfo.value.age = response.age;
      patientInfo.value.phone = response.phone;
      patientInfo.value.number = response.number;
      patientInfo.value.familyName = response.familyName;
      patientInfo.value.familyPhone = response.familyPhone;
      patientInfo.value.date = response.date;
      patientInfo.value.money = response.money;
    }
    console.log("response", response);
    console.log("patientInfo", patientInfo);
  } catch (error) {
    ElMessage.error("系统异常:" + error);
  }
};

const confirmBind = () => {
  if (bindInfo.value.cardId.trim() === "") {
    alert("请输入就诊卡号！");
    return;
  }
  submitBindInfo();
};

const register = () => {
  alert("请前往医院注册就诊信息！");
  showBindDialog.value = false;
};

const fetchPatientInfo = async () => {
  if (bindInfo.value.cardId) {
    try {
      const response = await getPatientNameByCardId(bindInfo.value.cardId);
      if (response) {
        bindInfo.value.patientName = response.patientName;
        bindInfo.value.number = response.number;
        bindInfo.value.phone = response.phone;
      } else {
        ElMessage.warning("该卡号不存在");
      }
    } catch (error) {
      ElMessage.warning("系统异常");
    }
  }
};

const submitBindInfo = async () => {
  try {
    const response = await bindPatientInfo(bindInfo.value);
    if (response === 1) {
      ElMessage.success("绑定成功");
      showBindDialog.value = false;
      fetchInfo();
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    ElMessage.error("绑定失败，请重试");
  }
};

onMounted(() => {
  fetchInfo();
});
</script>

<style scoped>
/* 全局样式 */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  color: #333;
}

.header {
  background-color: #4caf50;
  color: white;
  padding: 1rem;
  text-align: center;
}

.title {
  font-size: 1.5rem;
  margin: 0;
}

.subtitle {
  font-size: 1rem;
  margin: 0.5rem 0 0;
}

.main-content {
  flex-grow: 1;
  padding: 1rem;
}

/* 未绑定状态 */
.unbound-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.prompt {
  font-size: 1rem;
  color: #666;
  margin-bottom: 1rem;
}

/* 底部版权信息 */
.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.8rem;
}

/* 输入框宽度 */
.short-input {
  width: 250px; /* 根据需求调整 */
}

/* 带按钮的输入框布局 */
.input-with-button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.edit-btn {
  margin-left: 10px;
}

/* 保持标签左对齐 */
:deep(.el-form-item__label) {
  text-align: left;
  justify-content: flex-start !important;
}

/* 禁用状态的样式 */
:deep(.el-input.is-disabled .el-input__inner) {
  background-color: #f5f7fa;
  color: #606266;
}
</style>
